<script lang="ts" setup>
import { ref, reactive } from "vue";
import { Message } from "@arco-design/web-vue";
import { userRegister } from "@/service/user";
import { useRouter } from "vue-router";
import type { FormInstance } from "@arco-design/web-vue";

const router = useRouter();
const form = reactive({
    username: "",
    password: "",
    confirmPassword: "",
});

const loading = ref(false);
const formRef = ref<FormInstance>();

// 验证密码与确认密码一致
const validateConfirmPassword = (value: string, callback: any) => {
    if (value !== form.password) {
        callback('两次密码输入不一致');
    } else {
        callback();
    }
};

// 表单验证规则
const rules = {
    username: [
        { required: true, message: "请输入用户名" },
        { minLength: 3, message: "用户名长度不能小于3个字符" },
    ],
    password: [
        { required: true, message: "请输入密码" },
        { minLength: 6, message: "密码长度不能小于6个字符" },
    ],
    confirmPassword: [
        { required: true, message: "请确认密码" },
        { validator: validateConfirmPassword, message: "两次密码输入不一致" },
    ],
};

// 处理注册
const handleRegister = () => {
    formRef.value?.validate().then((errors: any) => {
        if (errors) return;
        loading.value = true;

        userRegister({
            username: form.username,
            password: form.password,
        })
            .then(() => {
                Message.success("注册成功，请返回登录");
            })
            .catch((error) => {
                Message.error(error.response?.data?.message || "注册失败，请稍后重试");
                loading.value = false;
            });
    });
};

const handleBackToLogin = () => {
    router.push("/login");
};

// 家具图片数组
const images = [
    {
        url: "https://images.unsplash.com/photo-1556228453-efd6c1ff04f6?q=80&w=1000&auto=format&fit=crop",
        alt: "现代家居空间"
    },
    {
        url: "https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?q=80&w=1000&auto=format&fit=crop",
        alt: "优雅室内设计"
    },
    {
        url: "https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?q=80&w=1000&auto=format&fit=crop",
        alt: "北欧风格家具"
    }
];

// 图片加载错误处理
const handleImageError = (index: number) => {
    // 备用图片
    const backupImages = [
        "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?q=80&w=1000&auto=format&fit=crop",
        "https://images.unsplash.com/photo-1589834390005-5d4fb9bf3d32?q=80&w=1000&auto=format&fit=crop",
        "https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?q=80&w=1000&auto=format&fit=crop"
    ];
    images[index].url = backupImages[index];
};
</script>

<template>
    <div class="register-container">
        <div class="register-left">
            <div class="register-branding">
                <h1 class="system-name">木木搭家具</h1>
                <h2 class="system-slogan">专业 · 品质 · 创新</h2>
                <div class="divider"></div>
                <p class="system-intro">一站式家居管理</p>
            </div>
            <div class="images-grid">
                <div class="register-image-container" v-for="(image, index) in images" :key="index">
                    <img class="register-image" :src="image.url" :alt="image.alt"
                        @error="() => handleImageError(index)" />
                </div>
            </div>
        </div>

        <div class="register-right">
            <div class="register-form-container">
                <div class="register-header">
                    <div class="logo-container">
                        <i class="logo-icon"></i>
                    </div>
                    <h2 class="welcome-text">注册账号</h2>
                    <p class="signin-text">创建您的管理员账户</p>
                </div>

                <a-card class="register-card" :bordered="false">
                    <a-form :model="form" :rules="rules" layout="vertical" @submit="handleRegister" ref="formRef">
                        <a-form-item field="username" label="用户名">
                            <a-input v-model="form.username" placeholder="请输入用户名" allow-clear>
                                <template #prefix>
                                    <icon-user />
                                </template>
                            </a-input>
                        </a-form-item>

                        <a-form-item field="password" label="密码">
                            <a-input-password v-model="form.password" placeholder="请输入密码" allow-clear>
                                <template #prefix>
                                    <icon-lock />
                                </template>
                            </a-input-password>
                        </a-form-item>

                        <a-form-item field="confirmPassword" label="确认密码">
                            <a-input-password v-model="form.confirmPassword" placeholder="请再次输入密码" allow-clear>
                                <template #prefix>
                                    <icon-lock />
                                </template>
                            </a-input-password>
                        </a-form-item>

                        <a-form-item>
                            <a-button :loading="loading" type="primary" long html-type="submit" class="register-button">
                                注册
                            </a-button>
                        </a-form-item>

                        <a-form-item class="login-option">
                            <a-button type="text" @click="handleBackToLogin" long>
                                已有账号？去登录
                            </a-button>
                        </a-form-item>
                    </a-form>
                </a-card>
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
.register-container {
    display: flex;
    height: 100vh;
    width: 100%;
    background-color: #f9f9f9;
}

.register-left {
    flex: 1;
    background: linear-gradient(135deg, rgb(var(--arcoblue-6)) 0%, rgb(var(--arcoblue-5)) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    position: relative;
    padding: 40px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    user-select: none;
}

.register-branding {
    z-index: 2;
    text-align: center;
    margin-bottom: 40px;
}

.system-name {
    font-size: 42px;
    font-weight: 600;
    margin-bottom: 12px;
    letter-spacing: 1px;
}

.system-slogan {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 16px;
    letter-spacing: 3px;
}

.divider {
    height: 3px;
    width: 60px;
    background-color: rgba(255, 255, 255, 0.7);
    margin: 20px auto;
    border-radius: 3px;
}

.system-intro {
    font-size: 16px;
    opacity: 0.9;
    font-weight: 300;
}

.images-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    width: 90%;
    max-width: 1200px;
}

.register-image-container {
    width: auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    height: 300px;
}

.register-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;

    &:hover {
        transform: scale(1.05);
    }
}

.register-right {
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
}

.register-form-container {
    width: 85%;
    max-width: 400px;
}

.register-header {
    text-align: center;
    margin-bottom: 30px;
}

.logo-container {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #F0F0F7;
    margin-bottom: 20px;
}

.logo-icon {
    display: inline-block;
    width: 35px;
    height: 35px;
    background-image: url('https://api.iconify.design/fluent:home-24-filled.svg');
    background-repeat: no-repeat;
    background-size: contain;
    filter: brightness(0.2);
}

.welcome-text {
    font-size: 28px;
    color: #333;
    margin-bottom: 8px;
    font-weight: 500;
}

.signin-text {
    color: #888;
    margin-bottom: 20px;
}

.register-card {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.register-button {
    height: 46px;
    font-size: 16px;
    font-weight: 500;
    background: rgb(var(--primary-6));
    border: none;
    border-radius: 6px;
    margin-top: 10px;
    transition: all 0.3s ease;

    &:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(var(--arcoblue-6), 0.3);
        background: rgb(var(--primary-5));
    }
}

.login-option {
    margin-top: 10px;
    text-align: center;
}

@media (max-width: 1200px) {
    .images-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .register-container {
        flex-direction: column;
    }

    .register-left {
        display: none;
    }

    .register-right {
        width: 100%;
    }

    .register-form-container {
        width: 90%;
        max-width: 450px;
        padding: 30px 0;
    }
}

@media (max-width: 576px) {
    .register-form-container {
        width: 95%;
        padding: 20px 0;
    }
}
</style>